<template>
  <div class="main">
    <div class="left">
      <el-button
        v-for="item in quickAccessButton"
        :key="item.label"
        style="border: 0; margin-left: 0"
        @click="updateCronExpress(item.value)"
        >{{ item.label }}</el-button
      >
    </div>
    <div class="right">
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="秒" name="second">
          <el-radio-group v-model="cronExpressObj.secondType" class="radio-group" @change="updateSecondType">
            <el-radio value="1"> 每秒 </el-radio>
            <el-radio value="2">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.secondObj.value1"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="0"
                  :max="59"
                  @focus="updateSecondType('2')"
                />
                <span>秒到</span>
                <el-input-number
                  v-model="cronExpressObj.secondObj.value2"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="0"
                  :max="59"
                  @focus="updateSecondType('2')"
                />
                <span>每秒</span>
              </div>
            </el-radio>
            <el-radio value="3">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.secondObj.value3"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="0"
                  :max="59"
                  @focus="updateSecondType('3')"
                />
                <span>秒开始，每</span>
                <el-input-number
                  v-model="cronExpressObj.secondObj.value4"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="59"
                  @focus="updateSecondType('3')"
                />
                <span>秒执行</span>
              </div>
            </el-radio>
            <el-radio class="zhiding-second" value="4">
              <div class="radio-inner">
                <span>指定</span>
                <el-checkbox-group
                  style="display: inline-block"
                  v-model="cronExpressObj.secondObj.value5"
                  @click="updateSecondType('4')"
                >
                  <div class="second-grid">
                    <el-checkbox v-for="i in 60" :label="i - 1" :value="i - 1" />
                  </div>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane label="分钟" name="minute">
          <el-radio-group v-model="cronExpressObj.minuteType" class="radio-group" @change="updateMinuteType">
            <el-radio value="1"> 每分钟 </el-radio>
            <el-radio value="2">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.minuteObj.value1"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="0"
                  :max="59"
                  @focus="updateMinuteType('2')"
                />
                <span>分到</span>
                <el-input-number
                  v-model="cronExpressObj.minuteObj.value2"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="0"
                  :max="59"
                  @focus="updateMinuteType('2')"
                />
                <span>每分钟</span>
              </div>
            </el-radio>
            <el-radio value="3">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.minuteObj.value3"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="0"
                  :max="59"
                  @focus="updateMinuteType('3')"
                />
                <span>分钟开始，每</span>
                <el-input-number
                  v-model="cronExpressObj.minuteObj.value4"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="59"
                  @focus="updateMinuteType('3')"
                />
                <span>分钟执行</span>
              </div>
            </el-radio>
            <el-radio class="zhiding-second" value="4">
              <div class="radio-inner">
                <span>指定</span>
                <el-checkbox-group
                  style="display: inline-block"
                  v-model="cronExpressObj.minuteObj.value5"
                  @click="updateMinuteType('4')"
                >
                  <div class="second-grid">
                    <el-checkbox v-for="i in 60" :key="i" :label="i - 1" :value="i - 1" />
                  </div>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane label="时" name="hour">
          <el-radio-group v-model="cronExpressObj.hourType" class="radio-group" @change="updateHourType">
            <el-radio value="1"> 每小时 </el-radio>
            <el-radio value="2">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.hourObj.value1"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="0"
                  :max="23"
                  @focus="updateHourType('2')"
                />
                <span>时到</span>
                <el-input-number
                  v-model="cronExpressObj.hourObj.value2"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="0"
                  :max="23"
                  @focus="updateHourType('2')"
                />
                <span>每小时</span>
              </div>
            </el-radio>
            <el-radio value="3">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.hourObj.value3"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="0"
                  :max="23"
                  @focus="updateHourType('3')"
                />
                <span>时开始，每</span>
                <el-input-number
                  v-model="cronExpressObj.hourObj.value4"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="23"
                  @focus="updateHourType('3')"
                />
                <span>小时执行</span>
              </div>
            </el-radio>
            <el-radio class="zhiding-second" value="4">
              <div class="radio-inner">
                <span>指定</span>
                <el-checkbox-group
                  style="display: inline-block"
                  v-model="cronExpressObj.hourObj.value5"
                  @click="updateHourType('4')"
                >
                  <div class="hour-grid">
                    <el-checkbox v-for="i in 24" :label="i - 1" :value="i - 1" />
                  </div>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane label="日" name="day">
          <el-radio-group v-model="cronExpressObj.dayType" class="radio-group" @change="updateDayType">
            <el-radio value="1"> 每日 </el-radio>
            <el-radio value="2"> 不指定 </el-radio>
            <el-radio value="3">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.dayObj.value1"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="31"
                  @focus="updateDayType('3')"
                />
                <span>号到</span>
                <el-input-number
                  v-model="cronExpressObj.dayObj.value2"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="31"
                  @focus="updateDayType('3')"
                />
                <span>每天</span>
              </div>
            </el-radio>
            <el-radio value="4">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.dayObj.value3"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="31"
                  @focus="updateDayType('4')"
                />
                <span>号开始，每</span>
                <el-input-number
                  v-model="cronExpressObj.dayObj.value4"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="31"
                  @focus="updateDayType('4')"
                />
                <span>天执行</span>
              </div>
            </el-radio>
            <!-- <el-radio value="5">
              <div class="radio-inner">
                <span>每月</span>
                <el-input-number
                  v-model="cronExpressObj.dayObj.value5"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="31"
									@focus="updateDayType('5')"
                />
                <span>号最近的工作日</span>
              </div>
            </el-radio> -->
            <el-radio value="6">
              <div class="radio-inner">
                <span>每月最后一天</span>
              </div>
            </el-radio>
            <el-radio class="zhiding-day" value="7">
              <div class="radio-inner">
                <span>指定</span>
                <el-checkbox-group
                  style="display: inline-block"
                  v-model="cronExpressObj.dayObj.value6"
                  @click="updateDayType('7')"
                >
                  <div class="day-grid">
                    <el-checkbox v-for="i in 31" :label="i" :value="i" />
                  </div>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane label="月" name="month">
          <el-radio-group v-model="cronExpressObj.monthType" class="radio-group" @change="updateMonthType">
            <el-radio value="1"> 每月 </el-radio>
            <el-radio value="2"> 不指定 </el-radio>
            <el-radio value="3">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.monthObj.value1"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="12"
                  @focus="updateMonthType('3')"
                />
                <span>月到</span>
                <el-input-number
                  v-model="cronExpressObj.monthObj.value2"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="12"
                  @focus="updateMonthType('3')"
                />
                <span>月每月</span>
              </div>
            </el-radio>
            <el-radio value="4">
              <div class="radio-inner">
                <span>周期从</span>
                <el-input-number
                  v-model="cronExpressObj.monthObj.value3"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="12"
                  @focus="updateMonthType('4')"
                />
                <span>月开始，每</span>
                <el-input-number
                  v-model="cronExpressObj.monthObj.value4"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="12"
                  @focus="updateMonthType('4')"
                />
                <span>月执行</span>
              </div>
            </el-radio>
            <el-radio class="zhiding-month" value="5">
              <div class="radio-inner">
                <span>指定</span>
                <el-checkbox-group
                  style="display: inline-block"
                  v-model="cronExpressObj.monthObj.value5"
                  @click="updateMonthType('5')"
                >
                  <div class="hour-grid">
                    <el-checkbox v-for="i in 12" :label="i" :value="i" />
                  </div>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane label="周" name="week">
          <el-radio-group v-model="cronExpressObj.weekType" class="radio-group" @change="updateWeekType">
            <el-radio value="1"> 每周 </el-radio>
            <el-radio value="2"> 不指定 </el-radio>
            <el-radio value="3">
              <div class="radio-inner">
                <span>周期从星期</span>
                <el-input-number
                  v-model="cronExpressObj.weekObj.value1"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="7"
                  @focus="updateWeekType('3')"
                />
                <span>到星期</span>
                <el-input-number
                  v-model="cronExpressObj.weekObj.value2"
                  class="number_input"
                  :controls="false"
                  size="small"
                  :min="1"
                  :max="7"
                  @focus="updateWeekType('3')"
                />
              </div>
            </el-radio>
            <el-radio value="4">
              <div class="radio-inner">
                <span>第</span>
                <el-input-number
                  v-model="cronExpressObj.weekObj.value3"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="7"
                  @focus="updateWeekType('4')"
                />
                <span>周的星期</span>
                <el-input-number
                  v-model="cronExpressObj.weekObj.value4"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="7"
                  @focus="updateWeekType('4')"
                />
              </div>
            </el-radio>
            <el-radio value="5">
              <div class="radio-inner">
                <span>本月最后一个星期</span>
                <el-input-number
                  v-model="cronExpressObj.weekObj.value5"
                  :controls="false"
                  class="number_input"
                  size="small"
                  :min="1"
                  :max="7"
                  @focus="updateWeekType('5')"
                />
              </div>
            </el-radio>
            <el-radio class="zhiding-week" value="6">
              <div class="radio-inner">
                <span>指定星期</span>
                <el-checkbox-group
                  style="display: inline-block"
                  v-model="cronExpressObj.weekObj.value6"
                  @click="updateWeekType('6')"
                >
                  <div class="week-grid">
                    <el-checkbox v-for="i in 7" :label="i" :value="i" />
                  </div>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-tab-pane>
        <!-- 后端schedule定时没有年，只有六位 -->
        <!-- <el-tab-pane label="年"></el-tab-pane> -->
      </el-tabs>
      <div
        style="
          border-left: 1px solid var(--el-border-color);
          border-right: 1px solid var(--el-border-color);
          border-bottom: 1px solid var(--el-border-color);
        "
      >
        <div style="margin-top: 6px; margin-left: 4px">最近五次执行时间:{{ cronExpress }}</div>
        <div class="preview-time">
          <el-tag v-for="(time, i) in times" :key="i" type="primary">{{ time }}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineModel, defineProps } from "vue";
import * as cronParse from "cron-parser";

const activeTab = ref("second");
const cronExpress = defineModel("cronExpress", {
  type: String,
  required: true,
});
const props = defineProps({
  visiable: {
    type: Boolean,
    required: true,
  },
});

const times = ref([]);
const cronExpressObj = reactive({
  secondType: "1",
  secondObj: {
    value1: 0,
    value2: 59,
    value3: 0,
    value4: 10,
    value5: [],
  },
  minuteType: "1",
  minuteObj: {
    value1: 0,
    value2: 59,
    value3: 0,
    value4: 10,
    value5: [],
  },
  hourType: "1",
  hourObj: {
    value1: 0,
    value2: 2,
    value3: 0,
    value4: 1,
    value5: [],
  },
  dayType: "1",
  dayObj: {
    value1: 1,
    value2: 10,
    value3: 1,
    value4: 10,
    value5: 1,
    value6: [],
  },
  monthType: "1",
  monthObj: {
    value1: 1,
    value2: 2,
    value3: 1,
    value4: 2,
    value5: [],
  },
  weekType: "2",
  weekObj: {
    value1: 1,
    value2: 2,
    value3: 1,
    value4: 1,
    value5: 1,
    value6: [],
  },
});

//秒 分 时处理
const secondMinuteHourProcess = (type, obj) => {
  let str = "";
  switch (type) {
    case "1":
      str = "*";
      break;
    case "2":
      str = obj.value1 + "-" + obj.value2;
      break;
    case "3":
      str = obj.value3 + "/" + obj.value4;
      break;
    case "4":
      if (obj.value5.length == 0) {
        str = "*";
      } else {
        str = obj.value5
          .sort((a, b) => {
            if (a > b) {
              return 1;
            } else if (a < b) {
              return -1;
            } else {
              return 0;
            }
          })
          .join(",");
      }
      break;
  }
  return str;
};

const analysisSecondMinuteHour = (express, typeName, objName) => {
  if (express == "*") {
    cronExpressObj[typeName] = "1";
  } else if (express.indexOf("-") > -1) {
    cronExpressObj[typeName] = "2";
    let numbers = express.split("-");
    cronExpressObj[objName].value1 = Number(numbers[0]);
    cronExpressObj[objName].value2 = Number(numbers[1]);
  } else if (express.indexOf("/") > -1) {
    cronExpressObj[typeName] = "3";
    let numbers = express.split("/");
    cronExpressObj[objName].value3 = Number(numbers[0]);
    cronExpressObj[objName].value4 = Number(numbers[1]);
  } else {
    cronExpressObj[typeName] = "4";
    let numbers = express.split(",");
    cronExpressObj[objName].value5 = numbers.map((item) => Number(item));
  }
};

//日处理
const dayProcess = (type, obj) => {
  let str = "";
  switch (type) {
    case "1":
      str = "*";
      break;
    case "2":
      str = "?";
      break;
    case "3":
      str = obj.value1 + "-" + obj.value2;
      break;
    case "4":
      str = obj.value3 + "/" + obj.value4;
      break;
    case "5":
      str = obj.value5 + "W";
      break;
    case "6":
      str = "L";
      break;
    case "7":
      if (obj.value6.length == 0) {
        str = "?";
      } else {
        str = obj.value6
          .sort((a, b) => {
            if (a > b) {
              return 1;
            } else if (a < b) {
              return -1;
            } else {
              return 0;
            }
          })
          .join(",");
      }
      break;
  }
  return str;
};

const analysisDay = (express) => {
  if (express == "*") {
    cronExpressObj.dayType = "1";
  } else if (express == "?") {
    cronExpressObj.dayType = "2";
  } else if (express.indexOf("-") > -1) {
    cronExpressObj.dayType = "3";
    let numbers = express.split("-");
    cronExpressObj.dayObj.value1 = Number(numbers[0]);
    cronExpressObj.dayObj.value2 = Number(numbers[1]);
  } else if (express.indexOf("/") > -1) {
    cronExpressObj.dayType = "4";
    let numbers = express.split("/");
    cronExpressObj.dayObj.value3 = Number(numbers[0]);
    cronExpressObj.dayObj.value4 = Number(numbers[1]);
  } else if (express.endsWith("W")) {
    cronExpressObj.dayType = "5";
    let numbers = express.split("W");
    cronExpressObj.dayObj.value5 = Number(numbers[0]);
  } else if (express == "L") {
    cronExpressObj.dayType = "6";
  } else {
    cronExpressObj.dayType = "7";
    let numbers = express.split(",");
    cronExpressObj.dayObj.value6 = numbers.map((item) => Number(item));
  }
};

//月处理
const monthProcess = (type, obj) => {
  let str = "";
  switch (type) {
    case "1":
      str = "*";
      break;
    case "2":
      str = "?";
      break;
    case "3":
      str = obj.value1 + "-" + obj.value2;
      break;
    case "4":
      str = obj.value3 + "/" + obj.value4;
      break;
    case "5":
      if (obj.value5.length == 0) {
        str = "?";
      } else {
        str = obj.value5
          .sort((a, b) => {
            if (a > b) {
              return 1;
            } else if (a < b) {
              return -1;
            } else {
              return 0;
            }
          })
          .join(",");
      }
      break;
  }
  return str;
};

const analysisMonth = (express) => {
  if (express == "*") {
    cronExpressObj.monthType = "1";
  } else if (express == "?") {
    cronExpressObj.monthType = "2";
  } else if (express.indexOf("-") > -1) {
    cronExpressObj.monthType = "3";
    let numbers = express.split("-");
    cronExpressObj.monthObj.value1 = Number(numbers[0]);
    cronExpressObj.monthObj.value2 = Number(numbers[1]);
  } else if (express.indexOf("/") > -1) {
    cronExpressObj.monthType = "4";
    let numbers = express.split("/");
    cronExpressObj.monthObj.value3 = Number(numbers[0]);
    cronExpressObj.monthObj.value4 = Number(numbers[1]);
  } else {
    cronExpressObj.monthType = "5";
    let numbers = express.split(",");
    cronExpressObj.monthObj.value5 = numbers.map((item) => Number(item));
  }
};

const weekProcess = (type, obj) => {
  let str = "";
  switch (type) {
    case "1":
      str = "*";
      break;
    case "2":
      str = "?";
      break;
    case "3":
      str = obj.value1 + "-" + obj.value2;
      break;
    case "4":
      str = obj.value3 + "#" + obj.value4;
      break;
    case "5":
      str = obj.value5 + "L";
      break;
    case "6":
      if (obj.value6.length == 0) {
        str = "?";
      } else {
        str = obj.value6
          .sort((a, b) => {
            if (a > b) {
              return 1;
            } else if (a < b) {
              return -1;
            } else {
              return 0;
            }
          })
          .map((i) => {
						if((i % 7) == 0){
							return 7;
						}else{
							return i % 7;
						}
					})
          .join(",");
      }
      break;
  }
  return str;
};

const analysisWeek = (express) => {
  if (express == "*") {
    cronExpressObj.weekType = "1";
  } else if (express == "?") {
    cronExpressObj.weekType = "2";
  } else if (express.indexOf("-") > -1) {
    cronExpressObj.weekType = "3";
    let numbers = express.split("-");
    cronExpressObj.weekObj.value1 = Number(numbers[0]);
    cronExpressObj.weekObj.value2 = Number(numbers[1]);
  } else if (express.indexOf("#") > -1) {
    cronExpressObj.weekType = "4";
    let numbers = express.split("#");
    cronExpressObj.weekObj.value3 = Number(numbers[0]);
    cronExpressObj.weekObj.value4 = Number(numbers[1]);
  } else if (express.endsWith("L")) {
    cronExpressObj.weekType = "5";
    let numbers = express.split("L");
    cronExpressObj.weekObj.value5 = Number(numbers[0]);
  } else {
    cronExpressObj.weekType = "6";
    let numbers = express.split(",");
    cronExpressObj.weekObj.value6 = numbers.map((item) => Number(item));
  }
};

//时间格式化
const dateFormat = (obj) => {
  let time = obj._date.c;
  return (
    time.year +
    "-" +
    time.month.toString().padStart(2, "0") +
    "-" +
    time.day.toString().padStart(2, "0") +
    " " +
    time.hour.toString().padStart(2, "0") +
    ":" +
    time.minute.toString().padStart(2, "0") +
    ":" +
    time.second.toString().padStart(2, "0")
  );
};

const computeCronExpress = () => {
  let obj = cronExpressObj;
  let express = "";
  let secondStr = secondMinuteHourProcess(obj.secondType, obj.secondObj);
  let minuteStr = secondMinuteHourProcess(obj.minuteType, obj.minuteObj);
  let hourStr = secondMinuteHourProcess(obj.hourType, obj.hourObj);
  let dayStr = dayProcess(obj.dayType, obj.dayObj);
  let monthStr = monthProcess(obj.monthType, obj.monthObj);
  let weekStr = weekProcess(obj.weekType, obj.weekObj);
  times.value.length = 0;
  express = secondStr + " " + minuteStr + " " + hourStr + " " + dayStr + " " + monthStr + " " + weekStr;
  cronExpress.value = express;
  try {
    let val = cronParse.parseExpression(express);
    times.value.length = 0;
    for (let i = 0; i < 5; i++) {
      times.value.push(dateFormat(val.next()));
    }
  } catch (e) {
    console.log(e);
    console.log(express);
  }
};

/**
 * 解析表达式给对象
 */
const analysisExpress = (express) => {
  if (express) {
    let datas = express.split(" ");
    analysisSecondMinuteHour(datas[0], "secondType", "secondObj");
    analysisSecondMinuteHour(datas[1], "minuteType", "minuteObj");
    analysisSecondMinuteHour(datas[2], "hourType", "hourObj");
    analysisDay(datas[3]);
    analysisMonth(datas[4]);
    analysisWeek(datas[5]);
  }
};

const initData = () => {
  cronExpressObj.secondType = "1";
  cronExpressObj.minuteType = "1";
  cronExpressObj.hourType = "1";
  cronExpressObj.dayType = "1";
  cronExpressObj.weekType = "2";
  cronExpressObj.monthType = "1";
  cronExpressObj.secondObj.value1 = 0;
  cronExpressObj.secondObj.value2 = 59;
  cronExpressObj.secondObj.value3 = 0;
  cronExpressObj.secondObj.value4 = 10;
  cronExpressObj.secondObj.value5.length = 0;
  cronExpressObj.minuteObj.value1 = 0;
  cronExpressObj.minuteObj.value2 = 59;
  cronExpressObj.minuteObj.value3 = 0;
  cronExpressObj.minuteObj.value4 = 10;
  cronExpressObj.minuteObj.value5.length = 0;
  cronExpressObj.hourObj.value1 = 0;
  cronExpressObj.hourObj.value2 = 2;
  cronExpressObj.hourObj.value3 = 0;
  cronExpressObj.hourObj.value4 = 1;
  cronExpressObj.hourObj.value5.length = 0;
  cronExpressObj.dayObj.value1 = 1;
  cronExpressObj.dayObj.value2 = 10;
  cronExpressObj.dayObj.value3 = 1;
  cronExpressObj.dayObj.value4 = 10;
  cronExpressObj.dayObj.value5 = 1;
  cronExpressObj.dayObj.value6.length = 0;
  cronExpressObj.monthObj.value1 = 1;
  cronExpressObj.monthObj.value2 = 2;
  cronExpressObj.monthObj.value3 = 1;
  cronExpressObj.monthObj.value4 = 2;
  cronExpressObj.monthObj.value5.length = 0;
  cronExpressObj.weekObj.value1 = 1;
  cronExpressObj.weekObj.value2 = 2;
  cronExpressObj.weekObj.value3 = 1;
  cronExpressObj.weekObj.value4 = 1;
  cronExpressObj.weekObj.value5 = 1;
  cronExpressObj.weekObj.value6.length = 0;
};

watch(
  () => props.visiable,
  (newVal) => {
    if (newVal) {
      activeTab.value = "second";
      initData();
      if (cronExpress.value) {
        try {
          cronParse.parseExpression(cronExpress.value);
          analysisExpress(cronExpress.value);
        } catch (e) {
          analysisExpress();
        }
      }
      computeCronExpress();
    }
  },
  {
    immediate: true,
  }
);

watch(cronExpressObj, (newVal) => {
  computeCronExpress();
});

const quickAccessButton = [
  { value: "0 0 0 ? * 1", label: "每周一执行" },
  { value: "0 0 0 ? * 7", label: "每周日执行" },
  { value: "0 0 0 1,16 * ?", label: "每两周执行" },
  { value: "0 0 0 1 * ?", label: "每月执行" },
  { value: "0 0 0 1 1/3 ?", label: "每三月执行" },
];

const updateCronExpress = (expression) => {
  analysisExpress(expression);
  computeCronExpress();
};

const updateSecondType = (type) => {
  cronExpressObj.secondType = type;
  if (type != "4") {
    cronExpressObj.secondObj.value5.length = 0;
  }
};
const updateMinuteType = (type) => {
  cronExpressObj.minuteType = type;
  if (type != "4") {
    cronExpressObj.minuteObj.value5.length = 0;
  }
};
const updateHourType = (type) => {
  cronExpressObj.hourType = type;
  if (type != "4") {
    cronExpressObj.hourObj.value5.length = 0;
  }
};
const updateDayType = (type) => {
  cronExpressObj.dayType = type;
  if (type != "7") {
    cronExpressObj.dayObj.value6.length = 0;
  }
};
const updateMonthType = (type) => {
  cronExpressObj.monthType = type;
  if (type != "5") {
    cronExpressObj.monthObj.value5.length = 0;
  }
};
const updateWeekType = (type) => {
  cronExpressObj.weekType = type;
  if (type != "6") {
    cronExpressObj.weekObj.value6.length = 0;
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  min-width: 600px;
  display: flex;
  flex-direction: row;
  .left {
    min-height: 100%;
    width: 180px;
    border: 1px solid var(--el-border-color);
    margin-right: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .right {
    height: 100%;
    width: calc(100% - 180px);
    display: flex;
    flex-direction: column;
    .el-radio-group {
      flex-direction: column;
      align-items: flex-start;
      .el-radio {
        margin-right: 0;
      }
    }

    .preview-time {
      width: 100%;
      height: 32px;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding-left: 4px;
    }

    .radio-inner > :not(:first-child) {
      margin-left: 12px;
    }

    .second-grid {
      display: inline-grid;
      grid-template-columns: repeat(10, 42px);
      grid-template-rows: repeat(6, 32px);
    }

    .hour-grid {
      display: inline-grid;
      grid-template-columns: repeat(8, 42px);
      grid-template-rows: repeat(3, 32px);
    }

    .day-grid {
      display: inline-grid;
      grid-template-columns: repeat(12, 42px);
      grid-template-rows: repeat(3, 32px);
    }

    .week-grid {
      display: inline-grid;
      grid-template-columns: repeat(7, 42px);
      grid-template-rows: repeat(1, 32px);
    }

    .zhiding-second {
      height: 195px;
      align-items: flex-start;
      :deep(.el-radio__input) {
        margin-top: 12px;
      }
    }

    .zhiding-month {
      height: 163px;
      align-items: flex-start;
      :deep(.el-radio__input) {
        margin-top: 12px;
      }
    }

    .zhiding-week {
      height: 131px;
      align-items: flex-start;
      :deep(.el-radio__input) {
        margin-top: 12px;
      }
    }

    .zhiding-day {
      height: 99px;
      align-items: flex-start;
      :deep(.el-radio__input) {
        margin-top: 12px;
      }
    }

    .number-input {
      width: 60px;
    }
  }
}
</style>
